import { FC, useMemo } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import styles from './index.module.less';
import { NavBar, Toast } from '@nutui/nutui-react';
// import Left from './left'
import magicStore from '@/store/magic';
import { observer } from 'mobx-react-lite'
import { ArrowLeft, Share, Close } from '@nutui/icons-react'

const ComNavBar = ({ title,onBackClick }) => {
    const navigate = useNavigate();

    return <div className={styles.topNavbar}>
        <NavBar
            // fixed={true}
            fixed={false}
            back={ onBackClick &&   <ArrowLeft name="left" color="#979797" />}
            onBackClick={onBackClick}
        >
            <span onClick={(e) => Toast.show(`${title}`)}>
                {title}
            </span>
        </NavBar>
         {/* <span onClick={(e) => Toast.show(`${title}`)}>
                {title}
            </span> */}
    </div>
};

export default observer(ComNavBar);